<template>
    <div class="container">
        <div>
            <head-bar height="80" middleText="搜索客户" :leftClick="returnPage"></head-bar>
        </div>
        <cell-input type="text" @getVal="getOrgNameVal" title="机构名称"></cell-input>
        <cell-select :selectData="userStatData" @getVal="getUserStatVal" title="状态"></cell-select>
        <cell-select :value="form.userType" :selectData="userTypeData" @getVal="getUserTypeVal"
                     title="用户类型"></cell-select>
        <cell-province-city @getVal="getPovinceCityVal"></cell-province-city>
        <cell-input type="text" @getVal="getMobileVal" title="手机号码"></cell-input>
        <cell-input type="text" @getVal="getlinkmanVal" title="联系人"></cell-input>
        <cell-select :selectData="strategicData" @getVal="getStrategicVal" title="是否战略合作"></cell-select>

        <wxc-popup popup-color="white"
                   :show="isBottomShow"
                   @wxcPopupOverlayClicked="popupOverlayBottomClick"
                   pos="top"
                   :height="height">
            <div class="search-content">
                <div>
                    <head-bar height="80" :middleText="resultTitle" :leftClick="returnSearchCondition"></head-bar>
                </div>

                <list>
                    <cell v-for="v in buyers">
                        <div class="item">
                            <div class="item-head">
                                <div class="item-title">
                                    <text class="item-title-t">{{v.buyerName}}</text>
                                    <text class="team tag" v-if="v.isStrategic == 1000">合</text>
                                    <text class="past tag" v-if="v.lateCount > 0">逾</text>
                                </div>
                                <div class="item-stat">
                                    <text class="item-stat-t">{{getStatName(v.userStatus)}}</text>
                                </div>
                            </div>
                            <div class="item-content">
                                <div class="content-ul">
                                    <text class="content-t content-text">应付款：￥{{v.paymentAmount}}</text>
                                    <text class="content-t content-text">应还款：￥{{getRepayAmount(v)}}</text>
                                    <text class="content-t content-text">最近跟进：{{formatTime(v.createTime)}}</text>
                                </div>
                                <div class="item-link">
                                    <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                </div>
                            </div>
                            <div class="item-btns">
                                <div class="item-btn">
                                    <text class="btn-font">写跟进</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">建任务</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">打电话</text>
                                </div>
                            </div>
                        </div>
                    </cell>
                    <cell v-for="v in suppers">
                        <div class="item supper-item">
                            <div class="item-head">
                                <div class="item-title">
                                    <text class="item-title-t">{{v.org_name}}</text>
                                    <text class="team tag" v-if="v.is_strategic == 1000">合</text>
                                </div>
                                <div class="item-stat">
                                    <text class="item-stat-t">{{getStatName(v.status)}}</text>
                                </div>
                            </div>
                            <div class="item-supper-content">
                                <div class="content-ul">
                                    <text class="content-t content-text">联系人：{{getlinkman(v)}}</text>
                                    <text class="content-t content-text">最近跟进：{{formatTime(v.follow_time)}}</text>
                                </div>
                                <div class="item-link">
                                    <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                </div>
                            </div>
                            <div class="item-btns">
                                <div class="item-btn">
                                    <text class="btn-font">写跟进</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">建任务</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">打电话</text>
                                </div>
                            </div>
                        </div>
                    </cell>
                </list>

                <div class="result-empty" v-if="buyers.length == 0 && suppers.length == 0">
                    <text class="result-empty-t">抱歉，暂无数据！</text>
                </div>

            </div>
        </wxc-popup>

        <div class="submit-area" @click="submitForm">
            <text class="submit-btn">搜索</text>
        </div>


    </div>
</template>

<!--搜索结果页-->
<style>

    .result-empty {
        justify-content: center;
        align-items: center;
        background-color: white;
        padding-top:300px;
    }

    .result-empty-t {
        font-size: 36px;
        color: #696969;
    }

    .item {
        height: 350px;
        width: 750px;
        margin-top: 5px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: white;
    }

    .supper-item {
        height: 287px;
    }

    .item-head {
        width: 720px;
        height: 80px;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: row;
        padding-top: 25px;
        border-bottom-width: 1px;
        border-bottom-color: #dddddd;
    }

    .btn-font {
        font-size: 30px;
        color: #b4b4b4;
    }

    .content-text {
        font-size: 30px;
        color: #696969;
    }

    .item-title {
        width: 510px;
        flex-direction: row;
    }

    .item-stat {
        width: 200px;
    }

    .item-title-t {
        font-size: 30px;
    }

    .past {
        background-color: #FF0000;
    }

    .tag {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        color: white;
        margin-left: 10px;
        margin-top: 3px;
    }

    .team {
        background-color: #01A65A;
    }

    .item-stat-t {
        color: #ff6f62;
        font-size: 30px;
        text-align: right;
        margin-right: 20px;
    }

    .item-content {
        width: 720px;
        height: 190px;
        flex-direction: row;
    }

    .item-supper-content {
        width: 720px;
        height: 126px;
        flex-direction: row;
    }

    .content-ul {
        width: 650px;
        flex-direction: column;
    }

    .content-t {
        height: 63px;
        font-size: 30px;
        margin-left: 10px;
        padding-top: 15px;
    }

    .item-link {
        width: 70px;
        align-items: center;
        justify-content: center;
    }

    .item-link-i {
        width: 50px;
        height: 50px;
    }

    .item-btns {
        border-top-width: 1px;
        border-top-color: #dddddd;
        height: 80px;
        flex-direction: row;
    }

    .item-btn {
        width: 240px;
        align-items: center;
        justify-content: center;
    }

</style>

<style>

    .search-content {
        background-color: #f0f0f0;
        flex-direction: column;
    }

    .container {
        background-color: #F6F6F6;
    }

    .submit-area {
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 750px;
        height: 90px;
        background-color: #01A65A;
    }

    .submit-btn {
        font-size: 30px;
        color: white;
    }

</style>

<script>
    import headBar from '../components/headBar.vue'
    import cellInput from '../components/cellInput.vue'
    import cellSelect from '../components/cellSelect.vue'
    import cellProvinceCity from '../components/cellProvinceCity.vue'
    import {WxcPopup} from 'weex-ui'
    import wutl from 'weex-ui/packages/utils/index.js'
    import dtl from '../utils/dateUtils.js'

    import nw from '../network/nw.js'

    const nav = weex.requireModule('navigator')
    const url = '/app/userSupplier/list'

    export default {
        components: {headBar, cellInput, cellSelect, cellProvinceCity, WxcPopup},
        data() {
            return {
//                状态1400:未注册,1000:已注册,1200:已认证,1100:已退出,1500:已删除
                userStatData: [
                    {name: '已认证', value: 1200},
                    {name: '已注册', value: 1000},
                    {name: '未注册', value: 1400},
                    {name: '已退出', value: 1100},
                    {name: '已删除', value: 1500}
                ],
//                是否战略合作（是：1000  否：2000）
                strategicData: [
                    {name: '是', value: '1000'},
                    {name: '否', value: '2000'}
                ],
                //用户类型
                userTypeData: [
                    {name: '采购商', value: '1000'},
                    {name: '供应商', value: '1100'}
                ],
                buyers: [],//搜索采购商数据
                suppers: [],//搜索供应商数据
                form: {
                    userType: '1000'
                },//搜索表单
                isBottomShow: false,
                height: 0,
                resultTitle: '搜索结果'
            }
        },
        methods: {

            openBottomPopup() {
                this.isBottomShow = true;
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick() {
                this.isBottomShow = false;
            },

            //返回上个页面
            returnPage() {
                nav.back()
            },

            //是否战略合作值
            getStrategicVal(data) {
                this.form.isStrategic = data
            },
            //联系人
            getlinkmanVal(data) {
                this.form.linkman = data
            },
            //手机号码
            getMobileVal(data) {
                this.form.linkmanMobile = data
            },
            //省市id
            getPovinceCityVal(data) {
                this.form.province = data[0]
                this.form.city = data[1]
            },
            //用户类型
            getUserTypeVal(data) {
//                var modal = weex.requireModule('modal')
//                modal.toast({message:data})
                this.form.userType = data[0]
            },
            //机构名称
            getOrgNameVal(data) {
                this.form.orgName = data
            },
            //用户状态
            getUserStatVal(data) {
                this.form.status = data
            },
            //格式化联系人
            getlinkman: function (v) {
                if (v.linkman) {
                    if (v.linkman_mobile) {
                        return `${v.linkman}（${v.linkman_mobile}）`
                    } else {
                        return `${v.linkman}`
                    }
                } else {
                    return ''
                }
            },

            //搜索
            submitForm() {
                var self = this
                nw.postDefine(url, {
                    data: this.form,
                    success(res) {
                        if (res.buyer != null) {
                            self.resultTitle = '搜索结果-采购商'
                        }
                        if (res.supper != null) {
                            self.resultTitle = '搜索结果-供应商'
                        }
                        self.buyers = res.buyer != null ? res.buyer : []
                        self.suppers = res.supper != null ? res.supper : []
                        self.isBottomShow = true
                    }
                })
            },
            //返回搜索条件页面
            returnSearchCondition() {
                this.isBottomShow = false
            },
            getStatName(code) {
                for (let i in this.userStatData) {
                    var ele = this.userStatData[i]
                    if (code == ele.value) {
                        return ele.name
                    }
                }
            },
            //应还款显示格式
            getRepayAmount: function (v) {
                if (!v.accountPeriod) {
                    return `${v.repayAmount}`
                } else {
                    return `${v.repayAmount}（账期：${v.accountPeriod}个月，还款日${v.repayDay}号）`
                }

            },
            formatTime: function (time) {
                if (!time) {
                    return ''
                }
                return dtl.formatDay(time)
            }
        },
        created() {
//             this.height = wutl.env.getPageHeight()
            this.height = wutl.env.getScreenHeight()

//            var modal = weex.requireModule('modal')
//            modal.toast({message:this.buyers.length})

        }
    }
</script>